<!--
 * @Description: 友情链接
 * @Author: zheng yiliang
 * @Date: 2021-05-27 21:40:50
 * @LastEditTime: 2021-06-13 18:22:54
 * @LastEditors: zheng yiliang
-->
<template>
  <div class="container-inner">
    <article>
      <section>
        <h1>链接申请说明</h1>
        <!-- <p>
          <i class="fa fa-close"></i>经常宕机&nbsp;
          <i class="fa fa-close"></i>不合法规&nbsp;
          <i class="fa fa-close"></i>插边球站&nbsp;
          <i class="fa fa-close"></i>红标报毒&nbsp;
          <i class="fa fa-check"></i>原创优先&nbsp;
          <i class="fa fa-check"></i>技术优先
        </p> -->
        <p>
          交换友链可在留言板留言.请将本站加入友链<br />
          名称：正好有时间<br />
          网址：http://zhengyiliang.cn<br />
          图标：http://zhengyiliang.cn/logo.png<br />
          描述：正好有时间·人在江湖
        </p>
        <!-- <p>
          申请提交后若无其它原因将在24小时内审核,如超过时间还未通过,请私信我.(各种额外因素)
        </p> -->
      </section>
    </article>
    <ul class="link-list">
      <li v-for="item in links" :key="item._id" class="zoomIn">
        <div class="pd-lr-10">
          <a :href="item.url" target="_blank">
            <img :src="item.icon" v-if="item.icon" />
            <h3>{{ item.name }}</h3>
            <p>{{ item.desc }}</p>
          </a>
        </div>
      </li>
    </ul>
    <loading
      v-if="links.length"
      :status="loadStatus"
      @refresh="loadMore"
    ></loading>
  </div>
</template>
<script>
import { links } from '@/api'
import loading from '@/components/loading'
import { scrollMixin } from '@/mixin'
export default {
  name: 'Links',
  components: {
    loading
  },
  data() {
    return {
      links: [],
      condition: {
        pagenum: 1,
        pagesize: 12
      }
    }
  },
  mixins: [scrollMixin],
  methods: {
    async allLinks() {
      const { _RejCode, data } = await links(this.condition)
      if (_RejCode !== '00000000') return
      this.links = data
    },
    // 加载更多
    async loadMore() {
      // 加载更多数据
      if (this.loadStatus !== '1') {
        this.condition.pagenum += 1
      }
      await this.$nextTick()
      const { _RejCode, data } = await links(this.condition)
      if (_RejCode !== '00000000') {
        // 加载失败
        this.loadStatus = '1'
        return
      }
      if (data.length <= this.condition.pagesize && data.length > 0) {
        if (data.length !== this.condition.pagesize) {
          this.loadStatus = '2'
        }
        // this.articles = [...this.articles, ...data]
        this.links([...this.links, ...data])
      } else {
        this.loadStatus = '2'
      }
    }
  },
  created() {
    this.allLinks()
  }
}
</script>
<style scoped>
@import '../styles/css/about.css';
</style>
